<template>
  <div class="changeBannerBox">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="changeBannerBox"
    >
      <el-form-item prop="title">
        <span>文章标题（title）：</span
        ><el-input v-model="ruleForm.title" placeholder="不超过20字"></el-input>
      </el-form-item>
      <el-form-item prop="author">
        <span>作者：</span>
        <el-input v-model="ruleForm.author"></el-input>
      </el-form-item>
      <el-form-item prop="keywords">
        <span>标签（keywords）：</span>
        <el-input v-model="ruleForm.keywords"></el-input>
      </el-form-item>
      <el-form-item prop="description" class="description-content">
        <span>简介（description）：</span>
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item prop="top">
        <span>设置固顶：</span>
        <el-checkbox v-model="ruleForm.top">固顶</el-checkbox>
      </el-form-item>
      <el-form-item prop="updateTime">
        <span>更新时间：</span>
        <el-date-picker
          v-model="ruleForm.updateTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="content" class="quill-content">
        <span>正文内容：</span>
        <quill-editor v-model="ruleForm.content"></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  mounted () {
    if (this.newsType == 'add') return
    this.ruleForm = this.newsData
    this.ruleForm.top = this.ruleForm.top ? true : false
  },
  data () {
    //自定义验证
    var validatePass = (rule, value, callback) => {
      const rexg = /select|update|delete|truncate|join|union|exec|insert|drop|count|%/ig
      if (rexg.test(value)) {
        callback(new Error('内容包含敏感字段'))
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        title: '',
        updateTime: '',
        numberHits: '',
        releaseStatus: '',
        description: '',
        top: 0,
        author: '',
        content: '',
        keywords: ''
      },
      //表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        updateTime: [
          { required: true, message: '更新时间不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '简介不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        author: [
          { required: true, message: '作者不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        content: [
          { required: true, message: '正文内容不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        keywords: [
          { required: true, message: '标签不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    cancel () {
      this.$router.go(-1)
    },
    async save () {
      const flag = await this.$refs['ruleForm'].validate().catch(err => { });
      if (!flag) return
      this.ruleForm.top = this.ruleForm.top ? 1 : 0
      if (this.newsType == 'add') {
        const { meta: { status, msg } } = await this.$http.addNews(this.ruleForm)
        if (status != 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
      } else if (this.newsType == 'edit') {
        const { meta: { status, msg } } = await this.$http.editNews(this.ruleForm)
        if (status != 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
      }
      this.$router.push({
        path: '/groupNews'
      })
    }
  },
  computed: {
    ...mapGetters(['newsType', 'newsData'])
  }
}
</script>
<style scoped lang="less">
.changeBannerBox {
  width: 100%;
  .changeBannerBox {
    margin: auto;
    max-width: 1080px;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .el-form-item {
      width: 100%;
      span {
        width: 200px;
        display: flex;
        justify-content: flex-end;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
        .quill-editor {
          flex: 1;
        }
        .ql-editor {
          min-height: 300px;
        }
        .el-input,
        .el-textarea {
          width: 440px;
        }
        .el-form-item__error {
          left: 200px;
        }
      }
      &:last-child {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        .el-button {
          margin: 0 30px;
        }
      }
    }
    .description-content,
    .quill-content {
      /deep/ .el-form-item__content {
        align-items: flex-start;
      }
    }
  }
}
</style>
